<a [routerLink]="['/nav/unit/'+id]"
   class="nav-link matLink clr-row clr-justify-content-between"
   routerLinkActive="active"
   [ngClass]="{'red': isEnding}">

  <span>
    <clr-icon class="is-error is-solid"
              shape="exclamation-triangle"
              *ngIf="isEnding"></clr-icon>
    <span class="first small">{{name}}</span>
    <br/>
    <span class="monospace">{{quantity | format:false:ms.options.formatter}}</span>
  </span>

  <span class="perSecTab  monospace clr-col clr-align-self-end">
    <span *ngIf="perSec.abs().gt(0.001)"
          [ngClass]="{'notEnough': perSec.lt(0)}">
      {{perSec | format:false:ms.options.formatter}}/s
    </span>
  </span>

</a>
